<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div style="margin: 0px auto;width: 300px">
    <div class="layadmin-user-login-main">
        <div style="text-align: center;margin-top: 150px">
            <p style="font-size: 35px;margin-bottom: 20px;">电力巡检系统</p>
            <p style="margin-bottom: 20px;">欢迎登录电力巡检系统</p>
        </div>
        <form class="layui-form" action="" method="post" lay-filter="example">
            <div class="layui-form-item" >
                <label class="layui-form-mid layui-icon layui-icon-user" ></label>
                <input style="width: 85%" type="text" name="user_account" lay-verify="required|user_account" placeholder="请输入用户账号" class="layui-input layui-input-inline">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-mid layui-icon layui-icon-password" ></label>
                <input style="width: 85%" type="password" name="user_pwd" lay-verify="required|user_pwd" placeholder="请输入用户密码" class="layui-input layui-input-inline">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-filter="demo1" lay-submit="demo1">登 入</button>
            </div>

        </form>
    </div>
    <div class="layui-trans" style="text-align: center;margin-top: 200px" >
        <p>© 2018 <a href="#" target="_blank">layui.com</a></p>
    </div>
</div>
</body>
<script rel="stylesheet" src="../js/jquery-3.4.1.js"></script>
<script rel="stylesheet" src="../layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','layer'], function(){
        var form = layui.form
            ,layer = layui.layer;
        //自定义验证规则
        form.verify({
            user_account: function(value){
                if(value.length < 6){
                    return '用户账号至少得6个字符啊';
                }
            }
            ,user_pwd: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
        //监听提交
        form.on('submit(demo1)', function(data){
            JSON.stringify(data.field);
            $.ajax({
                url:"/login.do",
                type:"post",
                data:JSON.stringify(data.field),
                dataType:"json",
                success:function (res) {
                    //登录成功
                    if (res.code == 200){
                        sessionStorage.setItem("users",JSON.stringify(res.data)); //存储数据
                        layer.msg(res.msg,{icon:1,time:3000});
                        var second=2;
                        //定时器2秒后跳转
                        var interval = setInterval(function () {
                            second--;
                            if (second === -1) {
                                window.location.href = "/index.jsp";
                                clearInterval(interval);
                            }
                        }, 1000);
                    }else if (res.code == 500){//失败
                        layer.msg(res.msg,{icon:5});
                    }else if (res.code == 501){//账号被冻结
                        layer.msg(res.msg,{icon:5});
                    }else if (res.code == 502) {
                        layer.msg(res.msg,{icon:5});
                    }else if (res.code == 503) {
                        layer.msg(res.msg,{icon:5});
                    }else if (res.code == 504){
                        layer.msg(res.msg,{icon:5});
                    }
                }
            });
            return false;
        });
    });
</script>
</html>